// pages/wallet/wallet.scss
.wallet-container {
  min-height: 100vh;
  background: #f5f5f5;
}

/* 自定义导航栏 */
.custom-nav {
  background: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  
  .nav-content {
    display: flex;
    align-items: center;
    height: 88rpx;
    padding: 0 20rpx;
  }
  
  .nav-back {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10rpx 20rpx 10rpx 10rpx;
    margin-right: 10rpx;
    
    &:active {
      opacity: 0.5;
    }
    
    .back-icon {
      width: 48rpx;
      height: 48rpx;
    }
  }
  
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    line-height: 88rpx;
  }
  
  .nav-placeholder {
    width: 68rpx;
  }
}

.main-content {
  padding-top: 200rpx;
}

/* 余额卡片 */
.balance-card {
  background: linear-gradient(135deg, #5cb85c 0%, #7cc87c 100%);
  padding: 40rpx 30rpx;
  color: white;
  
  .balance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .header-left {
      display: flex;
      align-items: center;
      gap: 15rpx;
    }
    
    .account-label {
      font-size: 28rpx;
      opacity: 0.9;
    }
    
    .transaction-icon {
      width: 32rpx;
      height: 32rpx;
    }
    
    .transaction-text {
      font-size: 24rpx;
      opacity: 0.9;
    }
  }
  
  .balance-amount {
    display: block;
    font-size: 72rpx;
    font-weight: 600;
    margin: 30rpx 0 15rpx;
    letter-spacing: 2rpx;
  }
  
  .balance-subtitle {
    display: block;
    font-size: 26rpx;
    opacity: 0.8;
    margin-bottom: 40rpx;
  }
  
  .withdraw-btn {
    width: 100%;
    background: white;
    color: #5cb85c;
    border-radius: 50rpx;
    padding: 28rpx;
    font-size: 32rpx;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15rpx;
    
    &::after {
      border: none;
    }
    
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
}

/* 菜单区域 */
.menu-section {
  background: white;
  margin-top: 20rpx;
  
  .section-header {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    padding: 30rpx;
  }
  
  .menu-list {
    .menu-item {
      display: flex;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .menu-icon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 25rpx;
      }
      
      .menu-text {
        flex: 1;
        font-size: 30rpx;
        color: #333;
      }
      
      .menu-arrow {
        width: 24rpx;
        height: 24rpx;
        opacity: 0.3;
      }
    }
  }
}

/* 最近交易 */
.recent-section {
  background: white;
  margin-top: 20rpx;
  padding: 30rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25rpx;
    
    text {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
    }
    
    .view-all {
      font-size: 26rpx;
      color: #5cb85c;
    }
  }
  
  .transaction-list {
    .transaction-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .transaction-left {
        display: flex;
        align-items: center;
        gap: 25rpx;
        flex: 1;
        
        .type-icon {
          width: 60rpx;
          height: 60rpx;
          background: #f5f5f5;
          border-radius: 50%;
          padding: 10rpx;
        }
        
        .transaction-info {
          flex: 1;
          
          .transaction-title {
            display: block;
            font-size: 28rpx;
            color: #333;
            margin-bottom: 8rpx;
          }
          
          .transaction-time {
            display: block;
            font-size: 24rpx;
            color: #999;
          }
        }
      }
      
      .transaction-amount {
        font-size: 32rpx;
        font-weight: 600;
        
        &.income {
          color: #5cb85c;
        }
        
        &.expense {
          color: #ff4757;
        }
      }
    }
  }
}

/* 登录提示 */
.login-prompt {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60rpx;
  
  .login-card {
    background: white;
    border-radius: 20rpx;
    padding: 80rpx 60rpx;
    text-align: center;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500rpx;
    
    .login-icon {
      width: 120rpx;
      height: 120rpx;
      margin-bottom: 40rpx;
      opacity: 0.6;
    }
    
    .login-title {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .login-desc {
      display: block;
      font-size: 28rpx;
      color: #999;
      margin-bottom: 60rpx;
    }
    
    .login-btn {
      background: #5cb85c;
      color: white;
      border-radius: 50rpx;
      font-size: 32rpx;
      padding: 24rpx 80rpx;
      border: none;
      
      &::after {
        border: none;
      }
    }
  }
}

/* 主要内容区域 - 移除重复定义，已在文件开头定义 */

/* 钱包概览 */
.wallet-overview {
  background: linear-gradient(135deg, #5cb85c 0%, #7cc87c 100%);
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 20rpx;
  color: white;
  
  .balance-card {
    .balance-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .balance-label {
        font-size: 30rpx;
        opacity: 0.9;
      }
      
      .wallet-icon {
        width: 48rpx;
        height: 48rpx;
        opacity: 0.8;
      }
    }
    
    .balance-amount {
      font-size: 72rpx;
      font-weight: bold;
      margin-bottom: 30rpx;
    }
    
    .balance-details {
      display: flex;
      gap: 40rpx;
      margin-bottom: 25rpx;
      
      .balance-item {
        flex: 1;
        
        .item-label {
          display: block;
          font-size: 24rpx;
          opacity: 0.8;
          margin-bottom: 8rpx;
        }
        
        .item-value {
          font-size: 32rpx;
          font-weight: 500;
        }
      }
    }
    
    .withdraw-notice {
      font-size: 22rpx;
      opacity: 0.7;
      text-align: center;
    }
  }
  
  .today-stats {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16rpx;
    padding: 25rpx;
    margin-top: 25rpx;
    
    .stat-item {
      flex: 1;
      text-align: center;
      
      .stat-label {
        display: block;
        font-size: 24rpx;
        opacity: 0.8;
        margin-bottom: 8rpx;
      }
      
      .stat-amount {
        font-size: 32rpx;
        font-weight: 500;
      }
    }
    
    .stat-divider {
      width: 2rpx;
      height: 80rpx;
      background: rgba(255, 255, 255, 0.2);
      margin: 0 25rpx;
    }
  }
}

/* 快捷操作 */
.quick-actions {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .action-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30rpx;
    
    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      
      .action-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 20rpx;
        background: #f8f9fa;
        padding: 15rpx;
        margin-bottom: 15rpx;
      }
      
      .action-label {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}

/* 收支概览 */
.financial-overview {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .view-more {
      font-size: 26rpx;
      color: #5cb85c;
    }
  }
  
  .financial-stats {
    display: flex;
    gap: 30rpx;
    
    .financial-item {
      flex: 1;
      text-align: center;
      
      .financial-label {
        display: block;
        font-size: 26rpx;
        color: #666;
        margin-bottom: 10rpx;
      }
      
      .financial-amount {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
        
        &.income {
          color: #5cb85c;
        }
        
        &.expense {
          color: #ff4757;
        }
      }
      
      .growth-rate {
        font-size: 22rpx;
        
        &.positive {
          color: #5cb85c;
        }
        
        &.negative {
          color: #ff4757;
        }
      }
    }
  }
}

/* 最近交易 */
.recent-transactions {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .view-more {
      font-size: 26rpx;
      color: #5cb85c;
    }
  }
  
  .transaction-list {
    .transaction-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .transaction-info {
        flex: 1;
        
        .transaction-type {
          display: block;
          font-size: 30rpx;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .transaction-time {
          display: block;
          font-size: 24rpx;
          color: #999;
          margin-bottom: 5rpx;
        }
        
        .transaction-desc {
          font-size: 24rpx;
          color: #666;
        }
        
        .order-no {
          font-size: 24rpx;
          color: #5cb85c;
          margin-top: 5rpx;
        }
      }
      
      .transaction-amount {
        font-size: 32rpx;
        font-weight: bold;
        
        &.income {
          color: #5cb85c;
        }
        
        &.expense {
          color: #ff4757;
        }
      }
    }
  }
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.modal-content {
  background: white;
  border-radius: 20rpx;
  width: 100%;
  max-width: 600rpx;
  max-height: 85vh;
  overflow: hidden;
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .modal-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .modal-close {
      font-size: 48rpx;
      color: #999;
      line-height: 1;
      padding: 10rpx;
    }
  }
  
  .modal-body {
    padding: 30rpx;
    max-height: 65vh;
    overflow-y: auto;
    
    .withdraw-info {
      text-align: center;
      margin-bottom: 30rpx;
      
      .available-text {
        font-size: 28rpx;
        color: #5cb85c;
        font-weight: 500;
      }
    }
    
    .form-group {
      margin-bottom: 30rpx;
      
      .form-label {
        display: block;
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 15rpx;
      }
      
      .amount-input-wrapper {
        position: relative;
        
        .currency-symbol {
          position: absolute;
          left: 20rpx;
          top: 50%;
          transform: translateY(-50%);
          font-size: 32rpx;
          color: #666;
          font-weight: bold;
        }
        
        .amount-input {
          width: 100%;
          padding: 25rpx 20rpx 25rpx 60rpx;
          border: 2rpx solid #e0e0e0;
          border-radius: 12rpx;
          font-size: 36rpx;
          background: #fafafa;
          text-align: center;
          font-weight: bold;
          color: #ff4757;
          
          &:focus {
            border-color: #5cb85c;
            background: white;
          }
        }
      }
      
      .amount-shortcuts {
        display: flex;
        gap: 15rpx;
        margin-top: 15rpx;
        
        .shortcut-btn {
          flex: 1;
          text-align: center;
          padding: 15rpx;
          background: #f8f9fa;
          border: 1rpx solid #e9ecef;
          border-radius: 8rpx;
          font-size: 26rpx;
          color: #666;
        }
      }
      
      .picker-input {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 25rpx 20rpx;
        border: 2rpx solid #e0e0e0;
        border-radius: 12rpx;
        font-size: 28rpx;
        background: #fafafa;
        
        .placeholder {
          color: #999;
        }
        
        .arrow-right {
          width: 24rpx;
          height: 24rpx;
          opacity: 0.5;
        }
      }
    }
    
    .withdraw-tips {
      background: #fff3cd;
      padding: 20rpx;
      border-radius: 12rpx;
      margin-bottom: 25rpx;
      
      .tip-text {
        display: block;
        font-size: 24rpx;
        color: #856404;
        line-height: 1.5;
        margin-bottom: 5rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    
    .fee-calculation {
      background: #f8f9fa;
      padding: 25rpx;
      border-radius: 12rpx;
      margin-top: 25rpx;
      
      .fee-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15rpx;
        
        &.total {
          padding-top: 15rpx;
          border-top: 1rpx solid #e0e0e0;
          font-weight: bold;
          
          .fee-value {
            color: #5cb85c;
            font-size: 32rpx;
          }
        }
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .fee-label {
          font-size: 28rpx;
          color: #666;
        }
        
        .fee-value {
          font-size: 28rpx;
          color: #333;
        }
      }
    }
    
    // 银行卡列表样式
    .bankcard-list {
      .bankcard-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 25rpx;
        background: #f8f9fa;
        border-radius: 12rpx;
        margin-bottom: 15rpx;
        
        .card-info {
          flex: 1;
          
          .bank-name {
            display: block;
            font-size: 30rpx;
            color: #333;
            font-weight: 500;
            margin-bottom: 8rpx;
          }
          
          .card-number {
            display: block;
            font-size: 28rpx;
            color: #666;
            margin-bottom: 5rpx;
          }
          
          .card-type {
            font-size: 24rpx;
            color: #999;
          }
          
          .default-mark {
            background: #5cb85c;
            color: white;
            font-size: 20rpx;
            padding: 4rpx 12rpx;
            border-radius: 10rpx;
            margin-left: 15rpx;
          }
        }
        
        .card-status {
          padding: 8rpx 16rpx;
          border-radius: 16rpx;
          font-size: 24rpx;
          
          &.verified {
            background: #e8f5e8;
            color: #5cb85c;
          }
          
          &.unverified {
            background: #fff3cd;
            color: #856404;
          }
        }
      }
    }
    
    .empty-bankcards {
      text-align: center;
      padding: 60rpx;
      
      .empty-icon {
        width: 120rpx;
        height: 120rpx;
        margin-bottom: 20rpx;
        opacity: 0.3;
      }
      
      .empty-text {
        font-size: 28rpx;
        color: #999;
      }
    }
    
    .security-info {
      background: #e8f5e8;
      padding: 20rpx;
      border-radius: 12rpx;
      margin-top: 25rpx;
      
      .security-text,
      .promotion-text {
        display: block;
        font-size: 24rpx;
        color: #5cb85c;
        line-height: 1.5;
        margin-bottom: 5rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    
    // 收支概览样式
    .financial-summary {
      text-align: center;
      margin-bottom: 30rpx;
      
      .period-text {
        display: block;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 30rpx;
      }
      
      .summary-stats {
        display: flex;
        gap: 40rpx;
        
        .summary-item {
          flex: 1;
          text-align: center;
          
          .summary-label {
            display: block;
            font-size: 26rpx;
            color: #666;
            margin-bottom: 10rpx;
          }
          
          .summary-amount {
            display: block;
            font-size: 40rpx;
            font-weight: bold;
            margin-bottom: 8rpx;
            
            &.income {
              color: #5cb85c;
            }
            
            &.expense {
              color: #ff4757;
            }
          }
          
          .growth-text {
            font-size: 22rpx;
            
            &.positive {
              color: #5cb85c;
            }
            
            &.negative {
              color: #ff4757;
            }
          }
        }
      }
    }
    
    .category-stats {
      .stats-title {
        display: block;
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
        padding-bottom: 10rpx;
        border-bottom: 2rpx solid #5cb85c;
      }
      
      .category-list {
        .category-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20rpx 0;
          border-bottom: 1rpx solid #f0f0f0;
          
          &:last-child {
            border-bottom: none;
          }
          
          .category-info {
            flex: 1;
            
            .category-name {
              display: block;
              font-size: 28rpx;
              color: #333;
              margin-bottom: 5rpx;
            }
            
            .category-percentage {
              font-size: 24rpx;
              color: #999;
            }
          }
          
          .category-amount {
            font-size: 30rpx;
            font-weight: 500;
            
            &.income {
              color: #5cb85c;
            }
            
            &.expense {
              color: #ff4757;
            }
          }
        }
      }
    }
  }
  
  .modal-footer {
    padding: 30rpx;
    border-top: 1rpx solid #f0f0f0;
    
    .add-card-btn {
      width: 100%;
      padding: 25rpx;
      background: #5cb85c;
      color: white;
      border-radius: 12rpx;
      font-size: 30rpx;
      border: none;
      
      &::after {
        border: none;
      }
    }
    
    .cancel-btn {
      flex: 1;
      padding: 25rpx;
      background: #f5f5f5;
      color: #666;
      border-radius: 12rpx;
      font-size: 30rpx;
      border: none;
      margin-right: 20rpx;
      
      &::after {
        border: none;
      }
    }
    
    .confirm-btn {
      flex: 1;
      padding: 25rpx;
      background: #5cb85c;
      color: white;
      border-radius: 12rpx;
      font-size: 30rpx;
      border: none;
      
      &::after {
        border: none;
      }
      
      &:disabled {
        background: #ccc;
      }
    }
  }
}

/* 提现弹窗 */
.withdraw-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .modal-content {
    width: 90%;
    max-width: 600rpx;
    background: white;
    border-radius: 20rpx;
    overflow: hidden;
    
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      .modal-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }
      
      .modal-close {
        font-size: 48rpx;
        color: #999;
        line-height: 1;
        padding: 10rpx;
      }
    }
    
    .modal-body {
      padding: 30rpx;
      max-height: 70vh;
      overflow-y: auto;
      
      .balance-info {
        text-align: center;
        padding: 20rpx 0 30rpx;
        
        .balance-label {
          display: block;
          font-size: 28rpx;
          color: #666;
          margin-bottom: 10rpx;
        }
        
        .balance-value {
          display: block;
          font-size: 48rpx;
          font-weight: bold;
          color: #5cb85c;
        }
      }
      
      .input-section,
      .card-section,
      .remark-section {
        margin-bottom: 30rpx;
      }
      
      .input-label {
        display: block;
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        margin-bottom: 15rpx;
      }
      
      .amount-input-box {
        display: flex;
        align-items: center;
        background: #f8f8f8;
        border-radius: 12rpx;
        padding: 0 20rpx;
        border: 2rpx solid #e0e0e0;
        
        .currency-symbol {
          font-size: 32rpx;
          color: #333;
          margin-right: 10rpx;
        }
        
        .amount-input {
          flex: 1;
          height: 80rpx;
          font-size: 32rpx;
          color: #333;
        }
      }
      
      .quick-amounts {
        display: flex;
        gap: 15rpx;
        margin-top: 15rpx;
        
        .quick-amount {
          flex: 1;
          text-align: center;
          padding: 15rpx 0;
          background: #f8f8f8;
          border-radius: 8rpx;
          font-size: 26rpx;
          color: #666;
          
          &:active {
            background: #e8f5e8;
            color: #5cb85c;
          }
        }
      }
      
      .card-list {
        .card-item {
          display: flex;
          align-items: center;
          padding: 20rpx;
          background: #f8f8f8;
          border-radius: 12rpx;
          margin-bottom: 15rpx;
          border: 2rpx solid transparent;
          
          &.selected {
            background: #e8f5e8;
            border-color: #5cb85c;
          }
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .bank-icon {
            width: 60rpx;
            height: 60rpx;
            margin-right: 15rpx;
          }
          
          .card-info {
            flex: 1;
            
            .bank-name {
              display: block;
              font-size: 28rpx;
              color: #333;
              margin-bottom: 5rpx;
            }
            
            .card-number {
              display: block;
              font-size: 24rpx;
              color: #999;
            }
          }
          
          .check-icon {
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
      
      .remark-input {
        width: 100%;
        min-height: 120rpx;
        padding: 20rpx;
        background: #f8f8f8;
        border-radius: 12rpx;
        font-size: 28rpx;
        border: 2rpx solid #e0e0e0;
        box-sizing: border-box;
      }
      
      .tips-section {
        .tips-text {
          display: block;
          font-size: 24rpx;
          color: #ff9800;
          margin-bottom: 8rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
    
    .modal-footer {
      display: flex;
      gap: 20rpx;
      padding: 30rpx;
      border-top: 1rpx solid #f0f0f0;
      
      .cancel-btn {
        flex: 1;
        height: 80rpx;
        background: #f5f5f5;
        color: #666;
        border-radius: 40rpx;
        font-size: 30rpx;
        border: none;
        line-height: 80rpx;
        
        &::after {
          border: none;
        }
      }
      
      .confirm-btn {
        flex: 1;
        height: 80rpx;
        background: linear-gradient(135deg, #5cb85c 0%, #4caf50 100%);
        color: white;
        border-radius: 40rpx;
        font-size: 30rpx;
        border: none;
        line-height: 80rpx;
        
        &::after {
          border: none;
        }
      }
    }
  }
}

/* 交易明细弹窗 */
.transaction-modal {
  .transaction-list {
    max-height: 60vh;
    
    .load-more {
      text-align: center;
      padding: 30rpx;
      
      text {
        font-size: 28rpx;
        color: #5cb85c;
        padding: 20rpx;
      }
    }
  }
}

